<template>
	<view class="msg_video">
		<image :src="info.thumb" :style="{width: `${layout.w}rpx`,height:`${layout.h}rpx`}" class="video_cover" mode="aspectFill"></image>
		<view class="video-play">
			<text class="icon cuIcon-playfill"></text>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			info:{
				type:Object,
				required:true
			}
		},
		computed:{
			layout(){
				const basew = 400
				if(!this.info.width||!this.info.height){
					return{
						w:basew,
						h:basew
					}
				}
				if(this.info.width<basew){
					return{
						w:this.info.width,
						h:this.info.height
					}
				}
				return{
					w:basew,
					h:this.info.height*basew/this.info.width
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg_video{
		max-width: 400rpx;
		position: relative;
		.video_cover{
			border-radius: 10rpx;
		}
		.video-play{
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
			background-color: rgba($color: #FFFFFF, $alpha: 0.6);
			display: flex;
			align-items: center;
			justify-content: center;
			.icon{
				font-size: 50rpx;
				color: rgba($color: #000000, $alpha: 0.8);
			}
		}
	}
</style>
